<template>
    <div class="box full" v-loading="loading">
        <div class="statistic">
            <div>
                <div class="title">住院患者</div>
                <div class="info clearfix">
                    <el-image
                        fit="contain"
                        src="/static/images/statistic-1.png"
                        class="img">
                    </el-image>
                    <div class="total">
                        <div class="label">累计</div>
                        <div class="value">{{todayData.totalPatient}}</div>
                    </div>
                    <div>
                        <div class="today"><span class="label">今日</span><span
                            class="value">{{todayData.todayPatient}}</span></div>
                        <div class="compare">
                            <span class="label">较昨日</span>
                            <span class="value"
                                  :class="{plus: todayData.contrastPatient>0, less: todayData.contrastPatient<1}">
                                <i :class="{'el-icon-top': todayData.contrastPatient>0, 'el-icon-bottom': todayData.contrastPatient<1}"></i>
                                {{Math.abs(todayData.contrastPatient)}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">陪护人员</div>
                <div class="info clearfix">
                    <el-image
                        fit="contain"
                        src="/static/images/statistic-2.png"
                        class="img">
                    </el-image>
                    <div class="total">
                        <div class="label">累计</div>
                        <div class="value">{{todayData.totalEscort}}</div>
                    </div>
                    <div>
                        <div class="today"><span class="label">今日</span><span
                            class="value">{{todayData.todayEscort}}</span></div>
                        <div class="compare">
                            <span class="label">较昨日</span>
                            <span class="value"
                                  :class="{plus: todayData.contrastEscort>0, less: todayData.contrastEscort<1}">
                                <i :class="{'el-icon-top': todayData.contrastEscort>0, 'el-icon-bottom': todayData.contrastEscort<1}"></i>
                                {{Math.abs(todayData.contrastEscort)}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">探视人员</div>
                <div class="info clearfix">
                    <el-image
                        fit="contain"
                        src="/static/images/statistic-3.png"
                        class="img">
                    </el-image>
                    <div class="total">
                        <div class="label">已结束</div>
                        <div class="value">{{todayData.todayVisitEnd}}</div>
                    </div>
                    <div>
                        <div class="today"><span class="label">已申请</span><span
                            class="value">{{todayData.todayVisit}}</span></div>
                        <div class="compare">
                            <span class="label">较昨日</span>
                            <span class="value"
                                  :class="{plus: todayData.contrastVisit>0, less: todayData.contrastVisit<1}">
                                <i :class="{'el-icon-top': todayData.contrastVisit>0, 'el-icon-bottom': todayData.contrastVisit<1}"></i>
                                {{Math.abs(todayData.contrastVisit)}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt20">
            <div class="items">
                <div class="head">待办事项</div>
                <div class="cont">
                    <div class="tabs">
                        <div class="more" @click="$router.push($route.path+'/backlog')">
                            查看更多<i class="iconfont icon-d-arrow-right"></i>
                        </div>
                        <div class="tab" :class="{active: tab==1}" @click="changeBacklog(1)">探视申请</div>
                        <div class="tab" :class="{active: tab==2}" @click="changeBacklog(2)">陪护关联</div>
                    </div>
                    <div class="list">
                        <div v-for="(item, index) in backlogs" :key="index">
                            <el-popover
                                placement="bottom"
                                width="100"
                                trigger="click">
                                <div class="list-popper">
                                    <el-button size="mini" type="text" class="reject" @click="dispose(item,1)">拒绝
                                    </el-button>
                                    <el-button type="primary" size="mini" @click="dispose(item,2)">同意</el-button>
                                </div>
                                <i class="el-icon-more more" slot="reference"></i>
                            </el-popover>
                            <div class="time"><i class="el-icon-time"></i>{{item.createTime}}</div>
                            <div class="name ellipsis"><span>·</span>{{item.content}}
                            </div>
                        </div>
                        <div class="empty" v-if="!backlogs[0]">
                            暂无该待办事项
                        </div>
                    </div>
                </div>
            </div>
            <div class="visitors">
                <div class="head">今日探视</div>
                <div class="list">
                    <div class="header" v-if="visitorList[0]">
                        <div>病区</div>
                        <div class="number">人数</div>
                    </div>
                    <div class="body">
                        <div class="li" v-for="(item, index) in visitorList" :key="index">
                            <div class="ellipsis"><span class="num">{{index+1}}</span>{{item.name}}</div>
                            <div class="number">{{item.cnt}}</div>
                        </div>
                    </div>
                    <div class="empty" v-if="!visitorList[0]">
                        暂无探视
                    </div>
                </div>
            </div>
        </div>

        <dialog-msk :show.sync="showReason" title="填写拒绝理由" :width="'450px'" @save="saveReason"
                    @cancel="closeDialog"
                    v-loading="dialogLoading"
                    element-loading-background="rgba(0, 0, 0, 0.3)">
            <el-form class="form-common" :model="reasonForm" :rules="reasonRules" ref="reasonForm"
                     size="small" :label-position="'left'">
                <el-form-item>
                    <el-input v-model="reasonForm.reason" size="small"
                              placeholder="请填写拒绝理由"
                              :autosize="{ minRows: 3, maxRows: 3}"
                              type="textarea" maxlength="50" show-word-limit></el-input>
                </el-form-item>
            </el-form>
        </dialog-msk>
        <transition name="slide">
            <router-view @upload="upload"></router-view>
        </transition>
    </div>
</template>

<script>
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            return {
                loading: false,
                todayData: {}, // 头部今日数据
                visitorList: [], // 今日探视列表
                tab: 1, // 待办事项类型
                backlogs: [], // 待办事项集合
                showReason: false, // 显示拒绝理由弹窗
                currentRow: null, // 当前所选行数据
                reasonForm: {
                    reason: ''
                },
                reasonRules: {
                    reason: [
                        // {required: true, message: '请输入拒绝理由', trigger: 'blur'}
                    ]
                },
                dialogLoading: false
            }
        },
        mounted() {
            let _this = this
            this.getTodayData()
            this.getVisitors()
            this.changeBacklog(this.tab)

            window.$vm.$on('homeRefresh', () => {
                _this.getTodayData()
                _this.getVisitors()
                _this.changeBacklog(_this.tab)
            })
        },
        methods: {
            // 获取顶部统计数据
            getTodayData() {
                this.$http.get('/todaySituation/hospital').then(result => {
                    if (result.success) {
                        this.todayData = result.data
                    }
                })
            },
            // 获取今日病区探视数据
            getVisitors() {
                this.$http.get('/todaySituation/wardTodayVisit', {
                    current: 1,
                    size: 10
                }).then(result => {
                    if (result.success) {
                        this.visitorList = result.data.records
                    }
                })
            },
            // 切换并查询待办事项
            changeBacklog(type) {
                this.tab = type
                this.loading = true
                let url = '/todaySituation/backlogEscortApply'
                if (type === 1) url = '/todaySituation/backlogVisitApply'
                this.$http.get(url, {
                    current: 1,
                    size: 11
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.backlogs = result.data.records
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 同意/拒绝
            dispose(row, type) {
                let _this = this
                if (type === 1) {
                    this.showReason = true
                    this.currentRow = row
                } else {
                    this.$method.messageBox('confirm', '确定同意申请吗?', (action, instance) => {
                        if (action === 'confirm') {
                            _this.$http.post('/todaySituation/backlogDispose', {
                                id: row.noticeId,
                                result: type
                            }).then(result => {
                                _this.changeBacklog(_this.tab)
                            })
                        }
                    }, '', false, false)
                }
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            // 拒绝弹窗保存
            saveReason() {
                let _this = this
                this.validate('reasonForm', () => {
                    if (_this.currentRow) {
                        _this.dialogLoading = true
                        _this.$http.post('/todaySituation/backlogDispose', {
                            id: _this.currentRow.noticeId,
                            result: 1,
                            reason: _this.reasonForm.reason
                        }).then(result => {
                            _this.dialogLoading = false
                            if (result.success) {
                                _this.closeDialog()
                                _this.changeBacklog(_this.tab)
                            }
                        }).catch(() => {
                            _this.dialogLoading = false
                        })
                    }
                })
            },
            closeDialog() {
                if (this.$refs.reasonForm) this.$refs.reasonForm.resetFields()
                this.showReason = false
                this.currentRow = null
            },
            upload() {
                this.getTodayData()
                this.getVisitors()
                this.changeBacklog(this.tab)
            }
        },
        components: {
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .box {
        padding: 30px;
    }

    .statistic {
        display: flex;
        padding: 2px;

        > div {
            flex: 1;
            margin-right: 30px;
            box-shadow: 0 0 6px -1px rgba(0, 0, 0, .2);
            padding: 20px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;

            &:last-child {
                margin: 0;
            }

            .title {
                line-height: 20px;
                margin-bottom: 15px;
            }

            .info {
                .img {
                    float: left;
                    height: 60px;
                    width: 40px;
                    margin-right: 15px;
                }

                .total {
                    width: 30%;
                    min-width: 100px;
                    max-width: 200px;
                    float: right;
                    text-align: center;
                    margin-left: 15px;
                    position: relative;

                    .label {
                        line-height: 16px;
                        color: #999;
                        margin-bottom: 4px;
                    }

                    .value {
                        line-height: 40px;
                        font-size: 30px;
                        color: #428CFF;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 95px;
                        margin-top: -35px;
                        border-left: 1px dashed #dedede;
                    }
                }

                .today, .compare {
                    line-height: 30px;
                    overflow: hidden;
                    text-align: center;

                    .label {
                        float: left;
                        color: #999;
                        width: 45px;
                        text-align: left;
                    }

                    .value {
                        i {
                            vertical-align: middle;
                        }

                        &.plus {
                            color: #f00;
                        }

                        &.less {
                            color: #A2E375;
                        }
                    }
                }

                .today {
                    .value {
                        font-weight: bolder;
                        font-size: 18px;
                    }
                }
            }
        }
    }

    .container {
        display: flex;
        padding: 2px;

        .items, .visitors {
            .head {
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                background-color: #E3EEFF;
                margin-bottom: 15px;
                font-size: 16px;
                font-weight: bolder;
            }
        }

        .items {
            flex: 1;

            .tabs {
                line-height: 40px;
                position: relative;
                z-index: 1;

                .tab {
                    display: inline-block;
                    padding: 0 20px;
                    cursor: pointer;

                    &.active {
                        background-color: #fff;
                        box-shadow: 0 0 6px -1px rgba(0, 0, 0, .2);
                        color: #428CFF;
                    }
                }

                .more {
                    float: right;
                    color: #428CFF;
                    cursor: pointer;

                    i {
                        vertical-align: top;
                        font-size: 14px;
                        line-height: 40px;
                        margin-left: 3px;
                    }
                }
            }

            .cont {
                height: calc(100% - 55px);
            }

            .list {
                height: calc(100% - 40px);
                padding: 20px 15px;
                box-shadow: 0 0 6px -1px rgba(0, 0, 0, .2);
                position: relative;
                z-index: 2;
                background-color: #fff;

                > div {
                    padding: 12px 0;
                    border-bottom: 1px solid #dedede;
                    line-height: 20px;

                    .time, .more {
                        float: right;
                        color: #999;
                        margin-left: 10px;
                    }

                    .time {
                        i {
                            margin-right: 10px;
                        }
                    }

                    .more {
                        line-height: 20px;
                        cursor: pointer;
                    }

                    .name {
                        display: block;

                        span {
                            font-weight: 800;
                            margin-right: 5px;
                            color: #FE5454;
                        }
                    }

                    &:last-child {
                        border: 0;
                    }
                }

            }
        }

        .empty {
            color: #999;
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
        }

        .visitors {
            width: 440px;
            margin-left: 30px;

            .list {
                height: calc(100% - 55px);
                padding: 20px 15px;
                box-shadow: 0 0 6px -1px rgba(0, 0, 0, .2);

                .header {
                    font-size: 0;
                    border-bottom: 1px solid #dedede;

                    > div {
                        display: inline-block;
                        font-size: 14px;
                        width: 60%;
                        text-align: center;
                        line-height: 84px;

                    }

                    .number {
                        width: 40%;
                    }
                }

                .body {
                    .li {
                        border-bottom: 1px solid #dedede;
                        font-size: 0;

                        > div {
                            display: inline-block;
                            font-size: 14px;
                            width: 60%;
                            text-align: center;
                            padding: 12px 20px;
                            line-height: 20px;
                            vertical-align: top;

                            &:first-child {
                                text-align: left;

                                .num {
                                    width: 20px;
                                    height: 20px;
                                    line-height: 18px;
                                    text-align: center;
                                    display: inline-block;
                                    vertical-align: top;
                                    border: 1px solid #dedede;
                                    color: #999;
                                    border-radius: 50%;
                                    margin-right: 10px;
                                }
                            }
                        }

                        .number {
                            width: 40%;
                        }

                        &:last-child {
                            border-bottom: 0 none;
                        }
                    }
                }
            }
        }
    }

    .list-popper {
        .reject {
            color: #999;
        }
    }
</style>
